import React from 'react';
import { Layout, Form, Icon, Input, Button, Checkbox, Row, Col, Card } from 'antd';
import { connect } from 'dva';
import { layout } from '../../components';
import styles from './login.less';

const { Header, Content, Footer } = Layout;
const { Nav } = layout;
const FormItem = Form.Item;

const LoginForm = Form.create()(
  ({ form, loginHandle }) => {
    const { getFieldDecorator, validateFields } = form;
    function onSubmit(e) {
      e.preventDefault();
      validateFields((err, values) => {
        if (!err) {
          loginHandle(values);
        }
      });
    }

    return (
      <Card title="欢迎登陆SDNhub" bordered >
        <Form onSubmit={onSubmit} className={styles.loginForm}>
          <FormItem>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: 'Please input your username!' }],
            })(
              <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />,
          )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }],
            })(
              <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />,
          )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true,
            })(
              <Checkbox>Remember me</Checkbox>,
          )}
            <a className={styles.loginFormForgot} href="">Forgot password</a>
            <Button type="primary" htmlType="submit" className={styles.loginFormButton}>
            Log in
          </Button>
          Or <a href="">register now!</a>
          </FormItem>
        </Form>
      </Card>
    );
  });


const LoginPage = ({ dispatch }) => {
  const loginHandle = (param) => {
    console.log('loginHandle', param);
    dispatch({
      type: 'login/login',
      payload: param,
    });
  };

  return (
    <Layout>
      <Header>
        <Nav />
      </Header>
      <Content className={styles.content} >
        <Row type="flex" align="middle" justify="space-between" className={styles.row}>
          <Col span={1} />
          <Col>
            <LoginForm loginHandle={loginHandle} />
          </Col>
          <Col span={1} />
        </Row>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        <p>Copyright © 2017 The Project by <a href="/">GSTA Cloud Compute Institute</a>.</p>
      </Footer>
    </Layout>
  );
};
export default connect()(LoginPage);
